<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg width="500" height="500">
    <!-- 矩形，x 和 y 为矩形的左上坐标-->
    <rect x="0" y="0" width="500" height="500" fill="rgba(128,0,128,1.0)"/>
    <!--圆形，cx 和 cy 为圆心坐标，r为半径 -->
    <circle cx="250" cy="250" r="200" fill="rgba(0,0,255,0.75)" />
    <!-- 椭圆形 cx 和 cy 为圆心坐标，rx为横轴半径 ry 为纵轴半径 -->
    <ellipse  cx="250" cy="250"  rx="100" ry="25" fill="rgba(0,255,0,0.5)"/>
    <!-- 线段 x1 y1 为起点,x2 y2为终点 ,stroke 指定直线颜色才能看到 -->
    <line x1="0" y1="0" x2="500" y2="500" stroke="rgba(255,0,0,0.3)"/>
    <!-- 文本x y为文本起点，其中放内容 -->
    <text x="250" y="250" >文本 </text>
    <!-- 用于绘制复杂的形状，如地图国境线 -->
    <path d=""> </path>
</svg>
</body>
</html>